<%@ include file="includes/head.jsp" %>

	<h1>Indice de Ejemplos</h1>
	<!-- TAG NAV aporta un valor semantico para el contenido interno, 
		 en este caso de NAVegacion -->
	<nav>
		<ol> <!-- Ordered list -->
			<li><a href="request-info?title=Ejemplo Request">Ejemplo Request Info por GET</a></li>
			<li><a href="servletRanking?title=Ranking Tiradas">Listado Ranking Alumnos</a></li>
			<li><a href="formularioFichero.jsp">Formulario subida Pdf</a></li>
			<li><a href="jquery.jsp">jQuery</a></li>
		</ol>
	</nav>
	
	<span> 
		${sessionScope.user}
	</span>
	
	<h1> 
		<% 
		String user = (String)session.getAttribute("username"); 
		if (user!= null){
			out.println("Ongi Etorri: " + user);
		}else{
			out.println("[x] No registrado");
		}
		%>
	</h1>
	<h2>
		<a href="logout" title="Desconectar">[x] Desconectar</a>
	</h2>
	
	<!-- Formulario para desloguear borrando la variable de session -->
	<form action="<%session.removeAttribute("user");%>" method="post">
		<input type="submit" value="LogOut" />
	</form>
	
	<h3>Fecha: <%=Utilidades.getActualDate()%></h3>
	
	<hr/>
	
	<!-- Formulario para realizar peticion POST al Request de Info -->
	<form action="request-info" method="post">
	
		<input type"text" name="nombre" placeholder="Escribe tu nombre"/>
		<input type="submit" value="enviar" />
	
	</form>
	
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec est erat. Nunc semper porttitor odio vel luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam vel pharetra metus. Nullam facilisis urna vitae ultricies sollicitudin. Quisque rutrum, risus ac vulputate adipiscing, lorem ipsum bibendum nisi, ut lacinia nisl nibh sit amet orci. Praesent id blandit leo, in fringilla elit. Vestibulum egestas sapien mi, aliquam gravida quam viverra in. Nam quis sem enim.</p>
	
	<% for (int i = 1; i<7; i++){ 
		out.print("<h"+i+">Cabecera "+i+"</h"+i+">");	
	}%>
	
	<table id="tabla" border="1">
	  	<thead>
	    	<tr>
	      		<th>Month</th>
	      		<th>Savings</th>
	    	</tr>
	  	</thead>
	  	<tfoot>
	    	<tr>
	      		<td colspan="2"> Pie de Pagina </td>
	    	</tr>
	  	</tfoot>
	  	<tbody>
	  		<% 	for (int i = 0; i < 500; i++)
	  			{
	  				out.print("<tr><td>January"+i+"</td><td>$100"+i+"</td></tr>");
	  			}
	  		%>
	  	</tbody>
	</table>
	
	
	<script>
	
		$(document).ready(function(){
		    $('#tabla').dataTable();
		});
	
		// jquery
		$( document ).ready(function() {
  		// Handler for .ready() called.
			//alert('Hello jquery');
  		// Cambiar el css dinamicamente
  		$("p").css("border","3px solid red");
  		// Selecciona todos los parrafos
  		$("p").click(function(){
  			$(this).hide();
  		})
		});
	
		/*function init(){
			alert('Hello World');
		}
	
		// esperamos a cargar toda la pagina para llamar a la funcion de init
		window.onload = init();*/
		
	</script>
	
	<%@ include file="includes/footer.jsp" %>
	